<script>
import NotificationConpont from "./NotificationConpont.vue";
import { parseBigInt } from "/src/components/node-kantboot/libs/rsa/jsencrypt/lib/lib/jsbn/jsbn";
export default {
  components: { NotificationConpont },
  data() {
    return {
      title: "",
      device: {},
      sensor: {},
      show: false,
      contentLoading: false,
      historyData:[]
    };
  },
  mounted() {},
  methods: {
    // 初始化地图
    open(device, sensor) {
      this.device = device;
      this.sensor = sensor;
      this.show = true;
      setTimeout(() => {
        console.log(this.$refs.notification);
        this.$refs.notification.openNew(sensor.id);
      }, 500);
      setTimeout(() => {
        this.$kt.request.send({
        uri: "/business-iot-web/admin/iotDeviceHistory/get1HLast",
        data: {
          sensorId: sensor.id
        },
        stateSuccess: (res) => {
          this.historyData = res.data;
          this.toChart();
          // console.log(this.historyData[0].gmtCreate,
          //   this.$kt.date.formatDate(this.historyData[0].gmtCreate, "yyyy-MM-dd hh:mm:ss")
          // );  
          console.log(this.historyData);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        },
      });
      }, 1000);
    },
    toChart() {
      let chartDom = document.getElementById("chartDeviceMonitor");
      let myChart = echarts.init(chartDom);
      let option;
      // let base = +new Date(1988, 9, 3);
      // let oneDay = 24 * 3600 * 1000;
      // let data = [[base, Math.random() * 300]];
      // for (let i = 1; i < 20000; i++) {
      //   let now = new Date((base += oneDay));
      //   data.push([
      //     +now,
      //     Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
      //   ]);
      // }
      // console.log(data);
      let data = []
      for (let index = 0; index < this.historyData.length; index++) {
        console.log(this.historyData[index].gmtCreate);
        let item = this.historyData[index];
        // time.push(this.$kt.date.toCommonFormat(this.historyData[index].gmtCreate))
        // 最后个位数和十位数变成0
        // let gmtCreate = (item.gmtCreate+"").substring(0, gmtCreate.length - 2)+"00";
        data.push([item.gmtCreate, item.sensorValue])
      }
      console.log(data);


      option = {
        title: {
          text: this.title,
        },
        title: {
          left: "left",
          text: "Sensor detail",
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        legend: {},
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
          // show: true,
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   dataView: { readOnly: false },
          //   magicType: { type: ["line", "bar"] },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          // type: "category",
          // boundaryGap: false,
          // data: ["11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00"],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          // type: "value",
          // axisLabel: {
          //   formatter: "{value} °C",
          // },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name: "Fake Data",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: data,
          },
          // {
          //   type: "line",
          //   data: [10, 11, 13, 11, 12, 12, 9],
          //   markPoint: {
          //     data: [
          //       { type: "max", name: "Max" },
          //       { type: "min", name: "Min" },
          //     ],
          //   },
          //   markLine: {
          //     data: [{ type: "average", name: "Avg" }],
          //   },
          // },
        ],
      };

      option && myChart.setOption(option);
    },
    // 关闭
    close() {
      this.show = false;
    },
  },
};
</script>

<template>
  <el-dialog
    draggable
    fullscreen
    width="900px"
    :title="title"
    v-model="show"
    @close="close"
  >
    <div class="box-box">
      <el-row>
        <el-col :span="12">
          <div
            class="chart"
            id="chartDeviceMonitor"
            style="
              display: inline-block;
              width: 600px;
              height: 400px;
              border-radius: 10px;
            "
          ></div>
          <div class="btn-btn">
            <!-- 按小时、按天、按年 -->
            <el-button type="primary" size="small" style="margin-left: 20px">{{
              $i18n.zhToGlobal("小时")
            }}</el-button>
            <el-button size="small" style="margin-left: 20px">{{
              $i18n.zhToGlobal("日")
            }}</el-button>
            <el-button size="small" style="margin-left: 20px">{{
              $i18n.zhToGlobal("月份")
            }}</el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <div>{{ "-" }}</div>
        </el-col>
        <el-col :span="10">
          <!--          Sensor Information-->
          <!--          Device configuration： jakeai-->
          <!--          Sensor name ： humidity-->
          <!--          Device reading： 28.1 [ °C ]-->
          <!--          Device type： Value-->
          <div class="box-box">
            <div class="title">Sensor Information</div>
            <div class="content">
              <div class="item">Device configuration： {{ device.name }}</div>
              <div class="item">Sensor name ： {{ sensor.name }}</div>
              <div class="item">
                Device reading： {{ sensor.status?.value || "-" }} [
                {{ sensor.unit?.name }} ]
              </div>
              <div v-if="false" class="item">Device type： Value</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 20px">
        <div style="margin: 20px 0">Notification</div>
        <NotificationConpont ref="notification" />
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.box-box {
  position: relative;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
  }
  .content {
    .item {
      margin-bottom: 10px;
    }
  }
}
</style>